<template>
    <el-dialog
        :close-on-click-modal="false"
        class="rl-dialog-header"
        :visible.sync="formVisible"
        :title="this.stype"
        @open="formInit"
        style="width: 90%; margin: 0 auto"
        :before-close="dialogClose"
        width="80%"
    >
        <div style="width: 100%; height: auto">
            <!-- 基本信息 -->
            <div style="border: 0px solid #f00; margin-top: 0.5%; border-radius: 25px; background-color: #fff">
                <div style="width: 98%; margin-left: 1%">
                    <el-divider></el-divider>
                    <br />
                    <el-form :model="form" status-icon label-width="130px" label-position="left" class="demo-ruleForm">
                        <el-row class="row_Css">
                            <el-col :span="24">
                                <el-form-item label="模块代码" prop="modelCode">
                                    <el-input v-model="form.modelCode" placeholder="" style="width: 96%"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="row_Css">
                            <el-col :span="24">
                                <el-form-item label="模块名称" prop="modelName">
                                    <el-input v-model="form.modelName" placeholder="" style="width: 96%"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="row_Css">
                            <el-col :span="24">
                                <el-form-item label="模块唯一标识" prop="modelMark">
                                    <el-input v-model="form.modelMark" placeholder="" style="width: 96%"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="row_Css">
                            <el-col :span="24">
                                <el-form-item label="功能分类" prop="capableType">
                                    <div class="input_css" style="width: 96%">
                                        &nbsp;
                                        <el-radio-group v-model="form.capableType">
                                            <el-radio :label="1">操作功能</el-radio>
                                            <el-radio :label="0">模块</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row class="row_Css">
                            <el-col :span="24">
                                <el-form-item label="模块使用分类" prop="modelType">
                                    <el-select v-model="value" placeholder="不使用分类">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row class="row_Css">
                            <el-col :span="24">
                                <el-form-item label="模块状态" prop="status">
                                    <div class="input_css" style="width: 96%">
                                        &nbsp;
                                        <el-radio-group v-model="form.status">
                                            <el-radio :label="1">禁用</el-radio>
                                            <el-radio :label="0">启用</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="row_Css">
                            <el-col :span="24">
                                <el-form-item label="连接" prop="link">
                                    <el-input v-model="form.link" placeholder="" style="width: 96%"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="row_Css">
                            <el-col :span="24">
                                <el-form-item label="图片" prop="address">
                                    <el-input v-model="form.address" placeholder="" style="width: 96%"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="row_Css">
                            <el-col :span="24">
                                <el-form-item label="排序" prop="serNumber">
                                    <el-input v-model="form.serNumber" placeholder="" style="width: 96%"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <br />
            <!-- 录入信息 -->

            <!-- 按钮 -->
            <div style="text-align: center">
                <el-image :src="submit_img" style="width: 150px; height: 60px" @click="save"></el-image>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import mode from '@/api/system_setting/mode_manager.js';
export default {
    name: 'mode_input',
    props: ['formVisible', 'formData'],
    data() {
        return {
            pid: '',
            stype: '',
            submit_img: require('../../../../assets/imgs/组 422.png'),
            delete_img: require('../../../../assets/imgs/组 423.png'),
            labelPosition: 'left',
            form: {},
            options: [
                {
                    value: '选项1',
                    label: '黄金糕'
                }
            ],
            value: ''
        };
    },
    created() {
        this.init();
    },
    watch: {
        //监听
        $route(to, from) {
            //路由变化方式，路由发生变化，方法就会执行
            this.init();
        }
    },

    methods: {
        formInit() {
            let data = this.formData.pid;
            if (data != undefined) {
                this.form = this.formData;
                this.stype = '修改模块';
            } else {
                this.pid = this.formData;
                this.stype = '新增模块';
            }
        },
        dialogClose() {
            this.fileList = [];
            this.form = {};
            this.$emit('closeDialog', false);
        },
        // 添加
        save() {
            let params = this.form;
            params.pid = this.pid;
            this.$post('sysManage/modelManage/save', params).then((res) => {
                this.$message.success('保存成功!');
            });
        },
        init() {
        }
    }
};
</script>
<style scoped>
/* 输入框样式 */
/deep/.el-input--small .el-input__inner {
    background: #fff;
    border: 1px solid #2e8ccc;
}
.input_css {
    background: #fff;
    border: 1px solid #2e8ccc;
    border-radius: 4px;
}
/deep/.el-textarea__inner {
    background: #fff;
    border: 1px solid #2e8ccc;
    height: 70px !important;
}
.fontStyle {
    font-size: 20px;
    font-family: '微软雅黑';
    color: #2e8ccc;
    font-weight: 600;
}
.el-divider--horizontal {
    margin: 10px 0;
    background-color: #2e8ccc;
    height: 2px;
}
.row_Css {
    font-size: 18px;
    font-family: '微软雅黑';
    color: #000;
    font-weight: 600;
}
/* /deep/.el-form-item__label{
    text-align: 'left'  !important;
} */
</style>
